<!DOCTYPE html>
<html>
  <head>
    <title>31_&#x9879;&#x76EE;&#x642D;&#x5EFA;</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="file:///c:\Users\xiaoming\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.3\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css"
    />

    <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
      code[class*='language-'],
      pre[class*='language-'] {
        color: #333;
        background: none;
        font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.4;

        -moz-tab-size: 8;
        -o-tab-size: 8;
        tab-size: 8;

        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      /* Code blocks */
      pre[class*='language-'] {
        padding: 0.8em;
        overflow: auto;
        /* border: 1px solid #ddd; */
        border-radius: 3px;
        /* background: #fff; */
        background: #f5f5f5;
      }

      /* Inline code */
      :not(pre) > code[class*='language-'] {
        padding: 0.1em;
        border-radius: 0.3em;
        white-space: normal;
        background: #f5f5f5;
      }

      .token.comment,
      .token.blockquote {
        color: #969896;
      }

      .token.cdata {
        color: #183691;
      }

      .token.doctype,
      .token.punctuation,
      .token.variable,
      .token.macro.property {
        color: #333;
      }

      .token.operator,
      .token.important,
      .token.keyword,
      .token.rule,
      .token.builtin {
        color: #a71d5d;
      }

      .token.string,
      .token.url,
      .token.regex,
      .token.attr-value {
        color: #183691;
      }

      .token.property,
      .token.number,
      .token.boolean,
      .token.entity,
      .token.atrule,
      .token.constant,
      .token.symbol,
      .token.command,
      .token.code {
        color: #0086b3;
      }

      .token.tag,
      .token.selector,
      .token.prolog {
        color: #63a35c;
      }

      .token.function,
      .token.namespace,
      .token.pseudo-element,
      .token.class,
      .token.class-name,
      .token.pseudo-class,
      .token.id,
      .token.url-reference .token.variable,
      .token.attr-name {
        color: #795da3;
      }

      .token.entity {
        cursor: help;
      }

      .token.title,
      .token.title .token.punctuation {
        font-weight: bold;
        color: #1d3e81;
      }

      .token.list {
        color: #ed6a43;
      }

      .token.inserted {
        background-color: #eaffea;
        color: #55a532;
      }

      .token.deleted {
        background-color: #ffecec;
        color: #bd2c00;
      }

      .token.bold {
        font-weight: bold;
      }

      .token.italic {
        font-style: italic;
      }

      /* JSON */
      .language-json .token.property {
        color: #183691;
      }

      .language-markup .token.tag .token.punctuation {
        color: #333;
      }

      /* CSS */
      code.language-css,
      .language-css .token.function {
        color: #0086b3;
      }

      /* YAML */
      .language-yaml .token.atrule {
        color: #63a35c;
      }

      code.language-yaml {
        color: #183691;
      }

      /* Ruby */
      .language-ruby .token.function {
        color: #333;
      }

      /* Markdown */
      .language-markdown .token.url {
        color: #795da3;
      }

      /* Makefile */
      .language-makefile .token.symbol {
        color: #795da3;
      }

      .language-makefile .token.variable {
        color: #183691;
      }

      .language-makefile .token.builtin {
        color: #0086b3;
      }

      /* Bash */
      .language-bash .token.keyword {
        color: #0086b3;
      }

      /* highlight */
      pre[data-line] {
        position: relative;
        padding: 1em 0 1em 3em;
      }
      pre[data-line] .line-highlight-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        display: block;
        width: 100%;
      }

      pre[data-line] .line-highlight {
        position: absolute;
        left: 0;
        right: 0;
        padding: inherit 0;
        margin-top: 1em;
        background: hsla(24, 20%, 50%, 0.08);
        background: linear-gradient(
          to right,
          hsla(24, 20%, 50%, 0.1) 70%,
          hsla(24, 20%, 50%, 0)
        );
        pointer-events: none;
        line-height: inherit;
        white-space: pre;
      }

      pre[data-line] .line-highlight:before,
      pre[data-line] .line-highlight[data-end]:after {
        content: attr(data-start);
        position: absolute;
        top: 0.4em;
        left: 0.6em;
        min-width: 1em;
        padding: 0 0.5em;
        background-color: hsla(24, 20%, 50%, 0.4);
        color: hsl(24, 20%, 95%);
        font: bold 65%/1.5 sans-serif;
        text-align: center;
        vertical-align: 0.3em;
        border-radius: 999px;
        text-shadow: none;
        box-shadow: 0 1px white;
      }

      pre[data-line] .line-highlight[data-end]:after {
        content: attr(data-end);
        top: auto;
        bottom: 0.4em;
      }
      html body {
        font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans,
          sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: #333;
        background-color: #fff;
        overflow: initial;
        box-sizing: border-box;
        word-wrap: break-word;
      }
      html body > :first-child {
        margin-top: 0;
      }
      html body h1,
      html body h2,
      html body h3,
      html body h4,
      html body h5,
      html body h6 {
        line-height: 1.2;
        margin-top: 1em;
        margin-bottom: 16px;
        color: #000;
      }
      html body h1 {
        font-size: 2.25em;
        font-weight: 300;
        padding-bottom: 0.3em;
      }
      html body h2 {
        font-size: 1.75em;
        font-weight: 400;
        padding-bottom: 0.3em;
      }
      html body h3 {
        font-size: 1.5em;
        font-weight: 500;
      }
      html body h4 {
        font-size: 1.25em;
        font-weight: 600;
      }
      html body h5 {
        font-size: 1.1em;
        font-weight: 600;
      }
      html body h6 {
        font-size: 1em;
        font-weight: 600;
      }
      html body h1,
      html body h2,
      html body h3,
      html body h4,
      html body h5 {
        font-weight: 600;
      }
      html body h5 {
        font-size: 1em;
      }
      html body h6 {
        color: #5c5c5c;
      }
      html body strong {
        color: #000;
      }
      html body del {
        color: #5c5c5c;
      }
      html body a:not([href]) {
        color: inherit;
        text-decoration: none;
      }
      html body a {
        color: #08c;
        text-decoration: none;
      }
      html body a:hover {
        color: #00a3f5;
        text-decoration: none;
      }
      html body img {
        max-width: 100%;
      }
      html body > p {
        margin-top: 0;
        margin-bottom: 16px;
        word-wrap: break-word;
      }
      html body > ul,
      html body > ol {
        margin-bottom: 16px;
      }
      html body ul,
      html body ol {
        padding-left: 2em;
      }
      html body ul.no-list,
      html body ol.no-list {
        padding: 0;
        list-style-type: none;
      }
      html body ul ul,
      html body ul ol,
      html body ol ol,
      html body ol ul {
        margin-top: 0;
        margin-bottom: 0;
      }
      html body li {
        margin-bottom: 0;
      }
      html body li.task-list-item {
        list-style: none;
      }
      html body li > p {
        margin-top: 0;
        margin-bottom: 0;
      }
      html body .task-list-item-checkbox {
        margin: 0 0.2em 0.25em -1.8em;
        vertical-align: middle;
      }
      html body .task-list-item-checkbox:hover {
        cursor: pointer;
      }
      html body blockquote {
        margin: 16px 0;
        font-size: inherit;
        padding: 0 15px;
        color: #5c5c5c;
        background-color: #f0f0f0;
        border-left: 4px solid #d6d6d6;
      }
      html body blockquote > :first-child {
        margin-top: 0;
      }
      html body blockquote > :last-child {
        margin-bottom: 0;
      }
      html body hr {
        height: 4px;
        margin: 32px 0;
        background-color: #d6d6d6;
        border: 0 none;
      }
      html body table {
        margin: 10px 0 15px 0;
        border-collapse: collapse;
        border-spacing: 0;
        display: block;
        width: 100%;
        overflow: auto;
        word-break: normal;
        word-break: keep-all;
      }
      html body table th {
        font-weight: bold;
        color: #000;
      }
      html body table td,
      html body table th {
        border: 1px solid #d6d6d6;
        padding: 6px 13px;
      }
      html body dl {
        padding: 0;
      }
      html body dl dt {
        padding: 0;
        margin-top: 16px;
        font-size: 1em;
        font-style: italic;
        font-weight: bold;
      }
      html body dl dd {
        padding: 0 16px;
        margin-bottom: 16px;
      }
      html body code {
        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
        font-size: 0.85em !important;
        color: #000;
        background-color: #f0f0f0;
        border-radius: 3px;
        padding: 0.2em 0;
      }
      html body code::before,
      html body code::after {
        letter-spacing: -0.2em;
        content: '\00a0';
      }
      html body pre > code {
        padding: 0;
        margin: 0;
        font-size: 0.85em !important;
        word-break: normal;
        white-space: pre;
        background: transparent;
        border: 0;
      }
      html body .highlight {
        margin-bottom: 16px;
      }
      html body .highlight pre,
      html body pre {
        padding: 1em;
        overflow: auto;
        font-size: 0.85em !important;
        line-height: 1.45;
        border: #d6d6d6;
        border-radius: 3px;
      }
      html body .highlight pre {
        margin-bottom: 0;
        word-break: normal;
      }
      html body pre code,
      html body pre tt {
        display: inline;
        max-width: initial;
        padding: 0;
        margin: 0;
        overflow: initial;
        line-height: inherit;
        word-wrap: normal;
        background-color: transparent;
        border: 0;
      }
      html body pre code:before,
      html body pre tt:before,
      html body pre code:after,
      html body pre tt:after {
        content: normal;
      }
      html body p,
      html body blockquote,
      html body ul,
      html body ol,
      html body dl,
      html body pre {
        margin-top: 0;
        margin-bottom: 16px;
      }
      html body kbd {
        color: #000;
        border: 1px solid #d6d6d6;
        border-bottom: 2px solid #c7c7c7;
        padding: 2px 4px;
        background-color: #f0f0f0;
        border-radius: 3px;
      }
      @media print {
        html body {
          background-color: #fff;
        }
        html body h1,
        html body h2,
        html body h3,
        html body h4,
        html body h5,
        html body h6 {
          color: #000;
          page-break-after: avoid;
        }
        html body blockquote {
          color: #5c5c5c;
        }
        html body pre {
          page-break-inside: avoid;
        }
        html body table {
          display: table;
        }
        html body img {
          display: block;
          max-width: 100%;
          max-height: 100%;
        }
        html body pre,
        html body code {
          word-wrap: break-word;
          white-space: pre;
        }
      }
      .markdown-preview {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      .markdown-preview .pagebreak,
      .markdown-preview .newpage {
        page-break-before: always;
      }
      .markdown-preview pre.line-numbers {
        position: relative;
        padding-left: 3.8em;
        counter-reset: linenumber;
      }
      .markdown-preview pre.line-numbers > code {
        position: relative;
      }
      .markdown-preview pre.line-numbers .line-numbers-rows {
        position: absolute;
        pointer-events: none;
        top: 1em;
        font-size: 100%;
        left: 0;
        width: 3em;
        letter-spacing: -1px;
        border-right: 1px solid #999;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .markdown-preview pre.line-numbers .line-numbers-rows > span {
        pointer-events: none;
        display: block;
        counter-increment: linenumber;
      }
      .markdown-preview pre.line-numbers .line-numbers-rows > span:before {
        content: counter(linenumber);
        color: #999;
        display: block;
        padding-right: 0.8em;
        text-align: right;
      }
      .markdown-preview .mathjax-exps .MathJax_Display {
        text-align: center !important;
      }
      .markdown-preview:not([for='preview']) .code-chunk .btn-group {
        display: none;
      }
      .markdown-preview:not([for='preview']) .code-chunk .status {
        display: none;
      }
      .markdown-preview:not([for='preview']) .code-chunk .output-div {
        margin-bottom: 16px;
      }
      .scrollbar-style::-webkit-scrollbar {
        width: 8px;
      }
      .scrollbar-style::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
      }
      .scrollbar-style::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgba(150, 150, 150, 0.66);
        border: 4px solid rgba(150, 150, 150, 0.66);
        background-clip: content-box;
      }
      html body[for='html-export']:not([data-presentation-mode]) {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        overflow: auto;
      }
      html
        body[for='html-export']:not([data-presentation-mode])
        .markdown-preview {
        position: relative;
        top: 0;
      }
      @media screen and (min-width: 914px) {
        html
          body[for='html-export']:not([data-presentation-mode])
          .markdown-preview {
          padding: 2em calc(50% - 457px + 2em);
        }
      }
      @media screen and (max-width: 914px) {
        html
          body[for='html-export']:not([data-presentation-mode])
          .markdown-preview {
          padding: 2em;
        }
      }
      @media screen and (max-width: 450px) {
        html
          body[for='html-export']:not([data-presentation-mode])
          .markdown-preview {
          font-size: 14px !important;
          padding: 1em;
        }
      }
      @media print {
        html
          body[for='html-export']:not([data-presentation-mode])
          #sidebar-toc-btn {
          display: none;
        }
      }
      html
        body[for='html-export']:not([data-presentation-mode])
        #sidebar-toc-btn {
        position: fixed;
        bottom: 8px;
        left: 8px;
        font-size: 28px;
        cursor: pointer;
        color: inherit;
        z-index: 99;
        width: 32px;
        text-align: center;
        opacity: 0.4;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        #sidebar-toc-btn {
        opacity: 1;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        padding: 32px 0 48px 0;
        font-size: 14px;
        box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
        box-sizing: border-box;
        overflow: auto;
        background-color: inherit;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc::-webkit-scrollbar {
        width: 8px;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgba(150, 150, 150, 0.66);
        border: 4px solid rgba(150, 150, 150, 0.66);
        background-clip: content-box;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc
        a {
        text-decoration: none;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc
        ul {
        padding: 0 1.6em;
        margin-top: 0.8em;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc
        li {
        margin-bottom: 0.8em;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .md-sidebar-toc
        ul {
        list-style-type: none;
      }
      html
        body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
        .markdown-preview {
        left: 300px;
        width: calc(100% - 300px);
        padding: 2em calc(50% - 457px - 150px);
        margin: 0;
        box-sizing: border-box;
      }
      @media screen and (max-width: 1274px) {
        html
          body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
          .markdown-preview {
          padding: 2em;
        }
      }
      @media screen and (max-width: 450px) {
        html
          body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
          .markdown-preview {
          width: 100%;
        }
      }
      html
        body[for='html-export']:not([data-presentation-mode]):not([html-show-sidebar-toc])
        .markdown-preview {
        left: 50%;
        transform: translateX(-50%);
      }
      html
        body[for='html-export']:not([data-presentation-mode]):not([html-show-sidebar-toc])
        .md-sidebar-toc {
        display: none;
      }
      /* Please visit the URL below for more information: */
      /*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
    </style>
  </head>
  <body for="html-export">
    <div class="mume markdown-preview">
      <h1
        class="mume-header"
        id="%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA%E8%A7%84%E8%8C%83"
      >
        &#x9879;&#x76EE;&#x642D;&#x5EFA;&#x89C4;&#x8303;
      </h1>

      <h2
        class="mume-header"
        id="%E4%B8%80-%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83"
      >
        &#x4E00;. &#x4EE3;&#x7801;&#x89C4;&#x8303;
      </h2>

      <h3
        class="mume-header"
        id="11-%E9%9B%86%E6%88%90-editorconfig-%E9%85%8D%E7%BD%AE"
      >
        1.1. &#x96C6;&#x6210; editorconfig &#x914D;&#x7F6E;
      </h3>

      <p>
        EditorConfig &#x6709;&#x52A9;&#x4E8E;&#x4E3A;&#x4E0D;&#x540C; IDE
        &#x7F16;&#x8F91;&#x5668;&#x4E0A;&#x5904;&#x7406;&#x540C;&#x4E00;&#x9879;&#x76EE;&#x7684;&#x591A;&#x4E2A;&#x5F00;&#x53D1;&#x4EBA;&#x5458;&#x7EF4;&#x62A4;&#x4E00;&#x81F4;&#x7684;&#x7F16;&#x7801;&#x98CE;&#x683C;&#x3002;
      </p>
      <pre
        data-role="codeBlock"
        data-info="yaml"
        class="language-yaml"
      ><span class="token comment"># http://editorconfig.org</span>

root = true

<span class="token punctuation">[</span>*<span class="token punctuation">]</span> <span class="token comment"># &#x8868;&#x793A;&#x6240;&#x6709;&#x6587;&#x4EF6;&#x9002;&#x7528;</span>
charset = utf<span class="token punctuation">-</span><span class="token number">8</span> <span class="token comment"># &#x8BBE;&#x7F6E;&#x6587;&#x4EF6;&#x5B57;&#x7B26;&#x96C6;&#x4E3A; utf-8</span>
indent_style = space <span class="token comment"># &#x7F29;&#x8FDB;&#x98CE;&#x683C;&#xFF08;tab | space&#xFF09;</span>
indent_size = 2 <span class="token comment"># &#x7F29;&#x8FDB;&#x5927;&#x5C0F;</span>
end_of_line = lf <span class="token comment"># &#x63A7;&#x5236;&#x6362;&#x884C;&#x7C7B;&#x578B;(lf | cr | crlf)</span>
trim_trailing_whitespace = true <span class="token comment"># &#x53BB;&#x9664;&#x884C;&#x9996;&#x7684;&#x4EFB;&#x610F;&#x7A7A;&#x767D;&#x5B57;&#x7B26;</span>
insert_final_newline = true <span class="token comment"># &#x59CB;&#x7EC8;&#x5728;&#x6587;&#x4EF6;&#x672B;&#x5C3E;&#x63D2;&#x5165;&#x4E00;&#x4E2A;&#x65B0;&#x884C;</span>

<span class="token punctuation">[</span><span class="token important">*.md</span><span class="token punctuation">]</span> <span class="token comment"># &#x8868;&#x793A;&#x4EC5; md &#x6587;&#x4EF6;&#x9002;&#x7528;&#x4EE5;&#x4E0B;&#x89C4;&#x5219;</span>
max_line_length = off
trim_trailing_whitespace = false
</pre>
      <p>
        VSCode
        &#x9700;&#x8981;&#x5B89;&#x88C5;&#x4E00;&#x4E2A;&#x63D2;&#x4EF6;&#xFF1A;EditorConfig
        for VS Code
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsq2gh989yj30pj05ggmb.jpg"
          alt="image-20210722215138665"
        />
      </p>
      <h3
        class="mume-header"
        id="12-%E4%BD%BF%E7%94%A8-prettier-%E5%B7%A5%E5%85%B7"
      >
        1.2. &#x4F7F;&#x7528; prettier &#x5DE5;&#x5177;
      </h3>

      <p>
        Prettier
        &#x662F;&#x4E00;&#x6B3E;&#x5F3A;&#x5927;&#x7684;&#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x5316;&#x5DE5;&#x5177;&#xFF0C;&#x652F;&#x6301;
        JavaScript&#x3001;TypeScript&#x3001;CSS&#x3001;SCSS&#x3001;Less&#x3001;JSX&#x3001;Angular&#x3001;Vue&#x3001;GraphQL&#x3001;JSON&#x3001;Markdown
        &#x7B49;&#x8BED;&#x8A00;&#xFF0C;&#x57FA;&#x672C;&#x4E0A;&#x524D;&#x7AEF;&#x80FD;&#x7528;&#x5230;&#x7684;&#x6587;&#x4EF6;&#x683C;&#x5F0F;&#x5B83;&#x90FD;&#x53EF;&#x4EE5;&#x641E;&#x5B9A;&#xFF0C;&#x662F;&#x5F53;&#x4E0B;&#x6700;&#x6D41;&#x884C;&#x7684;&#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x5316;&#x5DE5;&#x5177;&#x3002;
      </p>
      <p>1.&#x5B89;&#x88C5; prettier</p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> prettier -D
</pre>
      <p>2.&#x914D;&#x7F6E;.prettierrc &#x6587;&#x4EF6;&#xFF1A;</p>
      <ul>
        <li>
          useTabs&#xFF1A;&#x4F7F;&#x7528; tab
          &#x7F29;&#x8FDB;&#x8FD8;&#x662F;&#x7A7A;&#x683C;&#x7F29;&#x8FDB;&#xFF0C;&#x9009;&#x62E9;
          false&#xFF1B;
        </li>
        <li>
          tabWidth&#xFF1A;tab
          &#x662F;&#x7A7A;&#x683C;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x662F;&#x51E0;&#x4E2A;&#x7A7A;&#x683C;&#xFF0C;&#x9009;&#x62E9;
          2 &#x4E2A;&#xFF1B;
        </li>
        <li>
          printWidth&#xFF1A;&#x5F53;&#x884C;&#x5B57;&#x7B26;&#x7684;&#x957F;&#x5EA6;&#xFF0C;&#x63A8;&#x8350;
          80&#xFF0C;&#x4E5F;&#x6709;&#x4EBA;&#x559C;&#x6B22; 100
          &#x6216;&#x8005; 120&#xFF1B;
        </li>
        <li>
          singleQuote&#xFF1A;&#x4F7F;&#x7528;&#x5355;&#x5F15;&#x53F7;&#x8FD8;&#x662F;&#x53CC;&#x5F15;&#x53F7;&#xFF0C;&#x9009;&#x62E9;
          true&#xFF0C;&#x4F7F;&#x7528;&#x5355;&#x5F15;&#x53F7;&#xFF1B;
        </li>
        <li>
          trailingComma&#xFF1A;&#x5728;&#x591A;&#x884C;&#x8F93;&#x5165;&#x7684;&#x5C3E;&#x9017;&#x53F7;&#x662F;&#x5426;&#x6DFB;&#x52A0;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E3A;
          <code>none</code>&#xFF1B;
        </li>
        <li>
          semi&#xFF1A;&#x8BED;&#x53E5;&#x672B;&#x5C3E;&#x662F;&#x5426;&#x8981;&#x52A0;&#x5206;&#x53F7;&#xFF0C;&#x9ED8;&#x8BA4;&#x503C;
          true&#xFF0C;&#x9009;&#x62E9; false
          &#x8868;&#x793A;&#x4E0D;&#x52A0;&#xFF1B;
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="json"
        class="language-json"
      ><span class="token punctuation">{</span>
  <span class="token property">&quot;useTabs&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;tabWidth&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token property">&quot;printWidth&quot;</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
  <span class="token property">&quot;singleQuote&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;trailingComma&quot;</span><span class="token operator">:</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;semi&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</pre>
      <p>3.&#x521B;&#x5EFA;.prettierignore &#x5FFD;&#x7565;&#x6587;&#x4EF6;</p>
      <pre data-role="codeBlock" data-info class="language-"><code>/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
</code></pre>
      <p>
        4.VSCode &#x9700;&#x8981;&#x5B89;&#x88C5; prettier
        &#x7684;&#x63D2;&#x4EF6;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsq2acx21rj30ow057mxp.jpg"
          alt="image-20210722214543454"
        />
      </p>
      <p>5.&#x6D4B;&#x8BD5; prettier &#x662F;&#x5426;&#x751F;&#x6548;</p>
      <ul>
        <li>
          &#x6D4B;&#x8BD5;&#x4E00;&#xFF1A;&#x5728;&#x4EE3;&#x7801;&#x4E2D;&#x4FDD;&#x5B58;&#x4EE3;&#x7801;&#xFF1B;
        </li>
        <li>
          &#x6D4B;&#x8BD5;&#x4E8C;&#xFF1A;&#x914D;&#x7F6E;&#x4E00;&#x6B21;&#x6027;&#x4FEE;&#x6539;&#x7684;&#x547D;&#x4EE4;&#xFF1B;
        </li>
      </ul>
      <p>
        &#x5728; package.json &#x4E2D;&#x914D;&#x7F6E;&#x4E00;&#x4E2A;
        scripts&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="json"
        class="language-json"
      >    <span class="token property">&quot;prettier&quot;</span><span class="token operator">:</span> <span class="token string">&quot;prettier --write .&quot;</span>
</pre>
      <h3
        class="mume-header"
        id="13-%E4%BD%BF%E7%94%A8-eslint-%E6%A3%80%E6%B5%8B"
      >
        1.3. &#x4F7F;&#x7528; ESLint &#x68C0;&#x6D4B;
      </h3>

      <p>
        1.&#x5728;&#x524D;&#x9762;&#x521B;&#x5EFA;&#x9879;&#x76EE;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6211;&#x4EEC;&#x5C31;&#x9009;&#x62E9;&#x4E86;
        ESLint&#xFF0C;&#x6240;&#x4EE5; Vue
        &#x4F1A;&#x9ED8;&#x8BA4;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x914D;&#x7F6E;&#x9700;&#x8981;&#x7684;
        ESLint &#x73AF;&#x5883;&#x3002;
      </p>
      <p>
        2.VSCode &#x9700;&#x8981;&#x5B89;&#x88C5; ESLint
        &#x63D2;&#x4EF6;&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsq2oq26odj30pw05faaq.jpg"
          alt="image-20210722215933360"
        />
      </p>
      <p>
        3.&#x89E3;&#x51B3; eslint &#x548C; prettier
        &#x51B2;&#x7A81;&#x7684;&#x95EE;&#x9898;&#xFF1A;
      </p>
      <p>
        &#x5B89;&#x88C5;&#x63D2;&#x4EF6;&#xFF1A;&#xFF08;vue
        &#x5728;&#x521B;&#x5EFA;&#x9879;&#x76EE;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x9009;&#x62E9;
        prettier&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x4E24;&#x4E2A;&#x63D2;&#x4EF6;&#x4F1A;&#x81EA;&#x52A8;&#x5B89;&#x88C5;&#xFF09;
      </p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> i eslint-plugin-prettier eslint-config-prettier -D
</pre>
      <p>&#x6DFB;&#x52A0; prettier &#x63D2;&#x4EF6;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="json"
        class="language-json"
      >  extends<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;plugin:vue/vue3-essential&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;eslint:recommended&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;@vue/typescript/recommended&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;@vue/prettier&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;@vue/prettier/@typescript-eslint&quot;</span><span class="token punctuation">,</span>
    &apos;plugin<span class="token operator">:</span>prettier/recommended&apos;
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
</pre>
      <h3 class="mume-header" id="14-git-husky-%E5%92%8C-eslint">
        1.4. git Husky &#x548C; eslint
      </h3>

      <p>
        &#x867D;&#x7136;&#x6211;&#x4EEC;&#x5DF2;&#x7ECF;&#x8981;&#x6C42;&#x9879;&#x76EE;&#x4F7F;&#x7528;
        eslint
        &#x4E86;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x80FD;&#x4FDD;&#x8BC1;&#x7EC4;&#x5458;&#x63D0;&#x4EA4;&#x4EE3;&#x7801;&#x4E4B;&#x524D;&#x90FD;&#x5C06;
        eslint
        &#x4E2D;&#x7684;&#x95EE;&#x9898;&#x89E3;&#x51B3;&#x6389;&#x4E86;&#xFF1A;
      </p>
      <ul>
        <li>
          <p>
            &#x4E5F;&#x5C31;&#x662F;&#x6211;&#x4EEC;&#x5E0C;&#x671B;&#x4FDD;&#x8BC1;&#x4EE3;&#x7801;&#x4ED3;&#x5E93;&#x4E2D;&#x7684;&#x4EE3;&#x7801;&#x90FD;&#x662F;&#x7B26;&#x5408;
            eslint &#x89C4;&#x8303;&#x7684;&#xFF1B;
          </p>
        </li>
        <li>
          <p>
            &#x90A3;&#x4E48;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5728;&#x7EC4;&#x5458;&#x6267;&#x884C;
            <code>git commit</code>
            &#x547D;&#x4EE4;&#x7684;&#x65F6;&#x5019;&#x5BF9;&#x5176;&#x8FDB;&#x884C;&#x6821;&#x9A8C;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x7B26;&#x5408;
            eslint
            &#x89C4;&#x8303;&#xFF0C;&#x90A3;&#x4E48;&#x81EA;&#x52A8;&#x901A;&#x8FC7;&#x89C4;&#x8303;&#x8FDB;&#x884C;&#x4FEE;&#x590D;&#xFF1B;
          </p>
        </li>
      </ul>
      <p>
        &#x90A3;&#x4E48;&#x5982;&#x4F55;&#x505A;&#x5230;&#x8FD9;&#x4E00;&#x70B9;&#x5462;&#xFF1F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;
        Husky &#x5DE5;&#x5177;&#xFF1A;
      </p>
      <ul>
        <li>
          husky &#x662F;&#x4E00;&#x4E2A; git hook
          &#x5DE5;&#x5177;&#xFF0C;&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x89E6;&#x53D1;
          git
          &#x63D0;&#x4EA4;&#x7684;&#x5404;&#x4E2A;&#x9636;&#x6BB5;&#xFF1A;pre-commit&#x3001;commit-msg&#x3001;pre-push
        </li>
      </ul>
      <p>&#x5982;&#x4F55;&#x4F7F;&#x7528; husky &#x5462;&#xFF1F;</p>
      <p>
        &#x8FD9;&#x91CC;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x81EA;&#x52A8;&#x914D;&#x7F6E;&#x547D;&#x4EE4;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      >npx husky-init <span class="token operator">&amp;&amp;</span> <span class="token function">npm</span> <span class="token function">install</span>
</pre>
      <p>&#x8FD9;&#x91CC;&#x4F1A;&#x505A;&#x4E09;&#x4EF6;&#x4E8B;&#xFF1A;</p>
      <p>
        1.&#x5B89;&#x88C5; husky
        &#x76F8;&#x5173;&#x7684;&#x4F9D;&#x8D56;&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq0o5jxmj30bb04qwen.jpg"
          alt="image-20210723112648927"
        />
      </p>
      <p>
        2.&#x5728;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#x4E0B;&#x521B;&#x5EFA;
        <code>.husky</code> &#x6587;&#x4EF6;&#x5939;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info
        class="language-"
      ><code>npx huksy install
</code></pre>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq16zo75j307703mt8m.jpg"
          alt="image-20210723112719634"
        />
      </p>
      <p>
        3.&#x5728; package.json
        &#x4E2D;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x811A;&#x672C;&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq26phpxj30dj06fgm3.jpg"
          alt="image-20210723112817691"
        />
      </p>
      <p>
        &#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x53BB;&#x5B8C;&#x6210;&#x4E00;&#x4E2A;&#x64CD;&#x4F5C;&#xFF1A;&#x5728;&#x8FDB;&#x884C;
        commit &#x65F6;&#xFF0C;&#x6267;&#x884C; lint &#x811A;&#x672C;&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqq3hn229j30nf04z74q.jpg"
          alt="image-20210723112932943"
        />
      </p>
      <p>
        &#x8FD9;&#x4E2A;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x6267;&#x884C; git
        commit
        &#x7684;&#x65F6;&#x5019;&#x4F1A;&#x81EA;&#x52A8;&#x5BF9;&#x4EE3;&#x7801;&#x8FDB;&#x884C;
        lint &#x6821;&#x9A8C;&#x3002;
      </p>
      <h3 class="mume-header" id="15-git-commit-%E8%A7%84%E8%8C%83">
        1.5. git commit &#x89C4;&#x8303;
      </h3>

      <h4
        class="mume-header"
        id="151-%E4%BB%A3%E7%A0%81%E6%8F%90%E4%BA%A4%E9%A3%8E%E6%A0%BC"
      >
        1.5.1. &#x4EE3;&#x7801;&#x63D0;&#x4EA4;&#x98CE;&#x683C;
      </h4>

      <p>
        &#x901A;&#x5E38;&#x6211;&#x4EEC;&#x7684; git commit
        &#x4F1A;&#x6309;&#x7167;&#x7EDF;&#x4E00;&#x7684;&#x98CE;&#x683C;&#x6765;&#x63D0;&#x4EA4;&#xFF0C;&#x8FD9;&#x6837;&#x53EF;&#x4EE5;&#x5FEB;&#x901F;&#x5B9A;&#x4F4D;&#x6BCF;&#x6B21;&#x63D0;&#x4EA4;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x65B9;&#x4FBF;&#x4E4B;&#x540E;&#x5BF9;&#x7248;&#x672C;&#x8FDB;&#x884C;&#x63A7;&#x5236;&#x3002;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw17gaqjj30to0cj3zp.jpg"
          alt
        />
      </p>
      <p>
        &#x4F46;&#x662F;&#x5982;&#x679C;&#x6BCF;&#x6B21;&#x624B;&#x52A8;&#x6765;&#x7F16;&#x5199;&#x8FD9;&#x4E9B;&#x662F;&#x6BD4;&#x8F83;&#x9EBB;&#x70E6;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x5DE5;&#x5177;&#xFF1A;Commitizen
      </p>
      <ul>
        <li>
          <p>
            Commitizen
            &#x662F;&#x4E00;&#x4E2A;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x7F16;&#x5199;&#x89C4;&#x8303;
            commit message &#x7684;&#x5DE5;&#x5177;&#xFF1B;
          </p>
          <p>1.&#x5B89;&#x88C5; Commitizen</p>
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> commitizen -D
</pre>
      <p>
        2.&#x5B89;&#x88C5;
        cz-conventional-changelog&#xFF0C;&#x5E76;&#x4E14;&#x521D;&#x59CB;&#x5316;
        cz-conventional-changelog&#xFF1A;
      </p>
      <pre data-role="codeBlock" data-info="shell" class="language-shell">
npx commitizen init cz-conventional-changelog --save-dev --save-exact
</pre
      >
      <p>
        &#x8FD9;&#x4E2A;&#x547D;&#x4EE4;&#x4F1A;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x5B89;&#x88C5;
        cz-conventional-changelog&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqvz2odi4j30ek00zmx2.jpg"
          alt="image-20210723145249096"
        />
      </p>
      <p>
        &#x5E76;&#x4E14;&#x5728; package.json
        &#x4E2D;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqvzftay5j30iu04k74d.jpg"
          alt
        />
      </p>
      <p>
        &#x8FD9;&#x4E2A;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x63D0;&#x4EA4;&#x4EE3;&#x7801;&#x9700;&#x8981;&#x4F7F;&#x7528;
        <code>npx cz</code>&#xFF1A;
      </p>
      <ul>
        <li>
          &#x7B2C;&#x4E00;&#x6B65;&#x662F;&#x9009;&#x62E9;
          type&#xFF0C;&#x672C;&#x6B21;&#x66F4;&#x65B0;&#x7684;&#x7C7B;&#x578B;
        </li>
      </ul>
      <table>
        <thead>
          <tr>
            <th>Type</th>
            <th>&#x4F5C;&#x7528;</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>feat</td>
            <td>&#x65B0;&#x589E;&#x7279;&#x6027; (feature)</td>
          </tr>
          <tr>
            <td>fix</td>
            <td>&#x4FEE;&#x590D; Bug(bug fix)</td>
          </tr>
          <tr>
            <td>docs</td>
            <td>&#x4FEE;&#x6539;&#x6587;&#x6863; (documentation)</td>
          </tr>
          <tr>
            <td>style</td>
            <td>
              &#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x4FEE;&#x6539;(white-space,
              formatting, missing semi colons, etc)
            </td>
          </tr>
          <tr>
            <td>refactor</td>
            <td>&#x4EE3;&#x7801;&#x91CD;&#x6784;(refactor)</td>
          </tr>
          <tr>
            <td>perf</td>
            <td>
              &#x6539;&#x5584;&#x6027;&#x80FD;(A code change that improves
              performance)
            </td>
          </tr>
          <tr>
            <td>test</td>
            <td>&#x6D4B;&#x8BD5;(when adding missing tests)</td>
          </tr>
          <tr>
            <td>build</td>
            <td>
              &#x53D8;&#x66F4;&#x9879;&#x76EE;&#x6784;&#x5EFA;&#x6216;&#x5916;&#x90E8;&#x4F9D;&#x8D56;&#xFF08;&#x4F8B;&#x5982;
              scopes: webpack&#x3001;gulp&#x3001;npm &#x7B49;&#xFF09;
            </td>
          </tr>
          <tr>
            <td>ci</td>
            <td>
              &#x66F4;&#x6539;&#x6301;&#x7EED;&#x96C6;&#x6210;&#x8F6F;&#x4EF6;&#x7684;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x548C;
              package &#x4E2D;&#x7684; scripts
              &#x547D;&#x4EE4;&#xFF0C;&#x4F8B;&#x5982; scopes: Travis, Circle
              &#x7B49;
            </td>
          </tr>
          <tr>
            <td>chore</td>
            <td>
              &#x53D8;&#x66F4;&#x6784;&#x5EFA;&#x6D41;&#x7A0B;&#x6216;&#x8F85;&#x52A9;&#x5DE5;&#x5177;(&#x6BD4;&#x5982;&#x66F4;&#x6539;&#x6D4B;&#x8BD5;&#x73AF;&#x5883;)
            </td>
          </tr>
          <tr>
            <td>revert</td>
            <td>&#x4EE3;&#x7801;&#x56DE;&#x9000;</td>
          </tr>
        </tbody>
      </table>
      <ul>
        <li>
          &#x7B2C;&#x4E8C;&#x6B65;&#x9009;&#x62E9;&#x672C;&#x6B21;&#x4FEE;&#x6539;&#x7684;&#x8303;&#x56F4;&#xFF08;&#x4F5C;&#x7528;&#x57DF;&#xFF09;
        </li>
      </ul>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8ca15oj30r600wmx4.jpg"
          alt="image-20210723150147510"
        />
      </p>
      <ul>
        <li>
          &#x7B2C;&#x4E09;&#x6B65;&#x9009;&#x62E9;&#x63D0;&#x4EA4;&#x7684;&#x4FE1;&#x606F;
        </li>
      </ul>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8mq3zlj60ni01hmx402.jpg"
          alt="image-20210723150204780"
        />
      </p>
      <ul>
        <li>
          &#x7B2C;&#x56DB;&#x6B65;&#x63D0;&#x4EA4;&#x8BE6;&#x7EC6;&#x7684;&#x63CF;&#x8FF0;&#x4FE1;&#x606F;
        </li>
      </ul>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw8y05bjj30kt01fjrb.jpg"
          alt="image-20210723150223287"
        />
      </p>
      <ul>
        <li>
          &#x7B2C;&#x4E94;&#x6B65;&#x662F;&#x5426;&#x662F;&#x4E00;&#x6B21;&#x91CD;&#x5927;&#x7684;&#x66F4;&#x6539;
        </li>
      </ul>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqw9z5vbij30bm00q744.jpg"
          alt="image-20210723150322122"
        />
      </p>
      <ul>
        <li>
          &#x7B2C;&#x516D;&#x6B65;&#x662F;&#x5426;&#x5F71;&#x54CD;&#x67D0;&#x4E2A;
          open issue
        </li>
      </ul>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqwar8xp1j30fq00ya9x.jpg"
          alt="image-20210723150407822"
        />
      </p>
      <p>
        &#x6211;&#x4EEC;&#x4E5F;&#x53EF;&#x4EE5;&#x5728; scripts
        &#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x547D;&#x4EE4;&#x6765;&#x6267;&#x884C;
        cz&#xFF1A;
      </p>
      <p>
        <img
          src="https://tva1.sinaimg.cn/large/008i3skNgy1gsqwc4gtkxj30e207174t.jpg"
          alt="image-20210723150526211"
        />
      </p>
      <h4
        class="mume-header"
        id="152-%E4%BB%A3%E7%A0%81%E6%8F%90%E4%BA%A4%E9%AA%8C%E8%AF%81"
      >
        1.5.2. &#x4EE3;&#x7801;&#x63D0;&#x4EA4;&#x9A8C;&#x8BC1;
      </h4>

      <p>
        &#x5982;&#x679C;&#x6211;&#x4EEC;&#x6309;&#x7167; cz
        &#x6765;&#x89C4;&#x8303;&#x4E86;&#x63D0;&#x4EA4;&#x98CE;&#x683C;&#xFF0C;&#x4F46;&#x662F;&#x4F9D;&#x7136;&#x6709;&#x540C;&#x4E8B;&#x901A;&#x8FC7;
        <code>git commit</code>
        &#x6309;&#x7167;&#x4E0D;&#x89C4;&#x8303;&#x7684;&#x683C;&#x5F0F;&#x63D0;&#x4EA4;&#x5E94;&#x8BE5;&#x600E;&#x4E48;&#x529E;&#x5462;&#xFF1F;
      </p>
      <ul>
        <li>
          <p>
            &#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; commitlint
            &#x6765;&#x9650;&#x5236;&#x63D0;&#x4EA4;&#xFF1B;
          </p>
          <p>
            1.&#x5B89;&#x88C5; @commitlint/config-conventional &#x548C;
            @commitlint/cli
          </p>
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> i @commitlint/config-conventional @commitlint/cli -D
</pre>
      <p>
        2.&#x5728;&#x6839;&#x76EE;&#x5F55;&#x521B;&#x5EFA; commitlint.config.js
        &#x6587;&#x4EF6;&#xFF0C;&#x914D;&#x7F6E; commitlint
      </p>
      <pre
        data-role="codeBlock"
        data-info="js"
        class="language-javascript"
      >module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-extends">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&apos;@commitlint/config-conventional&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</pre>
      <p>
        3.&#x4F7F;&#x7528; husky &#x751F;&#x6210; commit-msg
        &#x6587;&#x4EF6;&#xFF0C;&#x9A8C;&#x8BC1;&#x63D0;&#x4EA4;&#x4FE1;&#x606F;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      >npx husky <span class="token function">add</span> .husky/commit-msg <span class="token string">&quot;npx --no-install commitlint --edit <span class="token variable">$1</span>&quot;</span>
</pre>
      <h2
        class="mume-header"
        id="%E4%BA%8C-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E9%9B%86%E6%88%90"
      >
        &#x4E8C;. &#x7B2C;&#x4E09;&#x65B9;&#x5E93;&#x96C6;&#x6210;
      </h2>

      <h3 class="mume-header" id="21-vueconfigjs-%E9%85%8D%E7%BD%AE">
        2.1. vue.config.js &#x914D;&#x7F6E;
      </h3>

      <p>
        vue.config.js
        &#x6709;&#x4E09;&#x79CD;&#x914D;&#x7F6E;&#x65B9;&#x5F0F;&#xFF1A;
      </p>
      <ul>
        <li>
          &#x65B9;&#x5F0F;&#x4E00;&#xFF1A;&#x76F4;&#x63A5;&#x901A;&#x8FC7; CLI
          &#x63D0;&#x4F9B;&#x7ED9;&#x6211;&#x4EEC;&#x7684;&#x9009;&#x9879;&#x6765;&#x914D;&#x7F6E;&#xFF1A;
          <ul>
            <li>
              &#x6BD4;&#x5982;
              publicPath&#xFF1A;&#x914D;&#x7F6E;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x90E8;&#x7F72;&#x7684;&#x5B50;&#x76EE;&#x5F55;&#xFF08;&#x9ED8;&#x8BA4;&#x662F;
              <code>/</code
              >&#xFF0C;&#x76F8;&#x5F53;&#x4E8E;&#x90E8;&#x7F72;&#x5728;
              <code>https://www.my-app.com/</code>&#xFF09;&#xFF1B;
            </li>
            <li>
              &#x6BD4;&#x5982;
              outputDir&#xFF1A;&#x4FEE;&#x6539;&#x8F93;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x5939;&#xFF1B;
            </li>
          </ul>
        </li>
        <li>
          &#x65B9;&#x5F0F;&#x4E8C;&#xFF1A;&#x901A;&#x8FC7; configureWebpack
          &#x4FEE;&#x6539; webpack &#x7684;&#x914D;&#x7F6E;&#xFF1A;
          <ul>
            <li>
              &#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x76F4;&#x63A5;&#x4F1A;&#x88AB;&#x5408;&#x5E76;&#xFF1B;
            </li>
            <li>
              &#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x4F1A;&#x63A5;&#x6536;&#x4E00;&#x4E2A;
              config&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; config
              &#x6765;&#x4FEE;&#x6539;&#x914D;&#x7F6E;&#xFF1B;
            </li>
          </ul>
        </li>
        <li>
          &#x65B9;&#x5F0F;&#x4E09;&#xFF1A;&#x901A;&#x8FC7; chainWebpack
          &#x4FEE;&#x6539; webpack &#x7684;&#x914D;&#x7F6E;&#xFF1A;
          <ul>
            <li>
              &#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x4F1A;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x57FA;&#x4E8E;
              <a href="https://github.com/mozilla-neutrino/webpack-chain"
                >webpack-chain</a
              >
              &#x7684; config
              &#x5BF9;&#x8C61;&#xFF0C;&#x53EF;&#x4EE5;&#x5BF9;&#x914D;&#x7F6E;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#xFF1B;
            </li>
          </ul>
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="js"
        class="language-javascript"
      ><span class="token keyword keyword-const">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&apos;path&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  outputDir<span class="token operator">:</span> <span class="token string">&apos;./build&apos;</span><span class="token punctuation">,</span>
  <span class="token comment">// configureWebpack: {</span>
  <span class="token comment">//   resolve: {</span>
  <span class="token comment">//     alias: {</span>
  <span class="token comment">//       views: &apos;@/views&apos;</span>
  <span class="token comment">//     }</span>
  <span class="token comment">//   }</span>
  <span class="token comment">// }</span>
  <span class="token comment">// configureWebpack: (config) =&gt; {</span>
  <span class="token comment">//   config.resolve.alias = {</span>
  <span class="token comment">//     &apos;@&apos;: path.resolve(__dirname, &apos;src&apos;),</span>
  <span class="token comment">//     views: &apos;@/views&apos;</span>
  <span class="token comment">//   }</span>
  <span class="token comment">// },</span>
  <span class="token function-variable function">chainWebpack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span><span class="token property-access">resolve</span><span class="token punctuation">.</span><span class="token property-access">alias</span>
      <span class="token punctuation">.</span><span class="token method function property-access">set</span><span class="token punctuation">(</span><span class="token string">&apos;@&apos;</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&apos;src&apos;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token method function property-access">set</span><span class="token punctuation">(</span><span class="token string">&apos;views&apos;</span><span class="token punctuation">,</span> <span class="token string">&apos;@/views&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</pre>
      <h3 class="mume-header" id="22-vue-router-%E9%9B%86%E6%88%90">
        2.2. vue-router &#x96C6;&#x6210;
      </h3>

      <p>
        &#x5B89;&#x88C5; vue-router
        &#x7684;&#x6700;&#x65B0;&#x7248;&#x672C;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> vue-router@next
</pre>
      <p>&#x521B;&#x5EFA; router &#x5BF9;&#x8C61;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHashHistory <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vue-router&apos;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> RouteRecordRaw <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vue-router&apos;</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> routes<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&apos;/&apos;</span><span class="token punctuation">,</span>
    redirect<span class="token operator">:</span> <span class="token string">&apos;/main&apos;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&apos;/main&apos;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword keyword-import">import</span><span class="token punctuation">(</span><span class="token string">&apos;../views/main/main.vue&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&apos;/login&apos;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword keyword-import">import</span><span class="token punctuation">(</span><span class="token string">&apos;../views/login/login.vue&apos;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
  history<span class="token operator">:</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> router<span class="token punctuation">;</span>
</pre>
      <p>&#x5B89;&#x88C5; router&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token keyword keyword-import">import</span> router <span class="token keyword keyword-from">from</span> <span class="token string">&apos;./router&apos;</span><span class="token punctuation">;</span>

<span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&apos;#app&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
      <p>&#x5728; App.vue &#x4E2D;&#x914D;&#x7F6E;&#x8DF3;&#x8F6C;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="html"
        class="language-html"
      ><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/login<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x767B;&#x5F55;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/main<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x9996;&#x9875;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre>
      <h3 class="mume-header" id="23-vuex-%E9%9B%86%E6%88%90">
        2.3. vuex &#x96C6;&#x6210;
      </h3>

      <p>&#x5B89;&#x88C5; vuex&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> vuex@next
</pre>
      <p>&#x521B;&#x5EFA; store &#x5BF9;&#x8C61;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vuex&apos;</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">state</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">&apos;coderwhy&apos;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> store<span class="token punctuation">;</span>
</pre>
      <p>&#x5B89;&#x88C5; store&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&apos;#app&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
      <p>&#x5728; App.vue &#x4E2D;&#x4F7F;&#x7528;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="html"
        class="language-html"
      ><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>{{ $store.state.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
</pre>
      <h3 class="mume-header" id="24-element-plus-%E9%9B%86%E6%88%90">
        2.4. element-plus &#x96C6;&#x6210;
      </h3>

      <p>
        Element
        Plus&#xFF0C;&#x4E00;&#x5957;&#x4E3A;&#x5F00;&#x53D1;&#x8005;&#x3001;&#x8BBE;&#x8BA1;&#x5E08;&#x548C;&#x4EA7;&#x54C1;&#x7ECF;&#x7406;&#x51C6;&#x5907;&#x7684;&#x57FA;&#x4E8E;
        Vue 3.0 &#x7684;&#x684C;&#x9762;&#x7AEF;&#x7EC4;&#x4EF6;&#x5E93;&#xFF1A;
      </p>
      <ul>
        <li>
          &#x76F8;&#x4FE1;&#x5F88;&#x591A;&#x540C;&#x5B66;&#x5728; Vue2
          &#x4E2D;&#x90FD;&#x4F7F;&#x7528;&#x8FC7; element-ui&#xFF0C;&#x800C;
          element-plus &#x6B63;&#x662F; element-ui &#x9488;&#x5BF9;&#x4E8E; vue3
          &#x5F00;&#x53D1;&#x7684;&#x4E00;&#x4E2A; UI
          &#x7EC4;&#x4EF6;&#x5E93;&#xFF1B;
        </li>
        <li>
          &#x5B83;&#x7684;&#x4F7F;&#x7528;&#x65B9;&#x5F0F;&#x548C;&#x5F88;&#x591A;&#x5176;&#x4ED6;&#x7684;&#x7EC4;&#x4EF6;&#x5E93;&#x662F;&#x4E00;&#x6837;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x5B66;&#x4F1A;
          element-plus&#xFF0C;&#x5176;&#x4ED6;&#x7C7B;&#x4F3C;&#x4E8E;
          ant-design-vue&#x3001;NaiveUI&#x3001;VantUI
          &#x90FD;&#x662F;&#x5DEE;&#x4E0D;&#x591A;&#x7684;&#xFF1B;
        </li>
      </ul>
      <p>&#x5B89;&#x88C5; element-plus</p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> element-plus
</pre>
      <h4 class="mume-header" id="241-%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5">
        2.4.1. &#x5168;&#x5C40;&#x5F15;&#x5165;
      </h4>

      <p>
        &#x4E00;&#x79CD;&#x5F15;&#x5165; element-plus
        &#x7684;&#x65B9;&#x5F0F;&#x662F;&#x5168;&#x5C40;&#x5F15;&#x5165;&#xFF0C;&#x4EE3;&#x8868;&#x7684;&#x542B;&#x4E49;&#x662F;&#x6240;&#x6709;&#x7684;&#x7EC4;&#x4EF6;&#x548C;&#x63D2;&#x4EF6;&#x90FD;&#x4F1A;&#x88AB;&#x81EA;&#x52A8;&#x6CE8;&#x518C;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="js"
        class="language-javascript"
      ><span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">ElementPlus</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&apos;element-plus&apos;</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token string">&apos;element-plus/lib/theme-chalk/index.css&apos;</span><span class="token punctuation">;</span>

<span class="token keyword module keyword-import">import</span> <span class="token imports">router</span> <span class="token keyword module keyword-from">from</span> <span class="token string">&apos;./router&apos;</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports">store</span> <span class="token keyword module keyword-from">from</span> <span class="token string">&apos;./store&apos;</span><span class="token punctuation">;</span>

<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span><span class="token maybe-class-name">ElementPlus</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">&apos;#app&apos;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
      <h4 class="mume-header" id="242-%E5%B1%80%E9%83%A8%E5%BC%95%E5%85%A5">
        2.4.2. &#x5C40;&#x90E8;&#x5F15;&#x5165;
      </h4>

      <p>
        &#x4E5F;&#x5C31;&#x662F;&#x5728;&#x5F00;&#x53D1;&#x4E2D;&#x7528;&#x5230;&#x67D0;&#x4E2A;&#x7EC4;&#x4EF6;&#x5BF9;&#x67D0;&#x4E2A;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x5F15;&#x5165;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="vue"
        class="language-vue"
      ><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;router-link to=&quot;/login&quot;&gt;&#x767B;&#x5F55;&lt;/router-link&gt;
    &lt;router-link to=&quot;/main&quot;&gt;&#x9996;&#x9875;&lt;/router-link&gt;
    &lt;router-view&gt;&lt;/router-view&gt;

    &lt;h2&gt;{{ $store.state.name }}&lt;/h2&gt;

    &lt;el-button&gt;&#x9ED8;&#x8BA4;&#x6309;&#x94AE;&lt;/el-button&gt;
    &lt;el-button type=&quot;primary&quot;&gt;&#x4E3B;&#x8981;&#x6309;&#x94AE;&lt;/el-button&gt;
    &lt;el-button type=&quot;success&quot;&gt;&#x6210;&#x529F;&#x6309;&#x94AE;&lt;/el-button&gt;
    &lt;el-button type=&quot;info&quot;&gt;&#x4FE1;&#x606F;&#x6309;&#x94AE;&lt;/el-button&gt;
    &lt;el-button type=&quot;warning&quot;&gt;&#x8B66;&#x544A;&#x6309;&#x94AE;&lt;/el-button&gt;
    &lt;el-button type=&quot;danger&quot;&gt;&#x5371;&#x9669;&#x6309;&#x94AE;&lt;/el-button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script lang=&quot;ts&quot;&gt;
import { defineComponent } from &apos;vue&apos;;

import { ElButton } from &apos;element-plus&apos;;

export default defineComponent({
  name: &apos;App&apos;,
  components: {
    ElButton,
  },
});
&lt;/script&gt;

&lt;style lang=&quot;less&quot;&gt;&lt;/style&gt;
</code></pre>
      <p>
        &#x4F46;&#x662F;&#x6211;&#x4EEC;&#x4F1A;&#x53D1;&#x73B0;&#x662F;&#x6CA1;&#x6709;&#x5BF9;&#x5E94;&#x7684;&#x6837;&#x5F0F;&#x7684;&#xFF0C;&#x5F15;&#x5165;&#x6837;&#x5F0F;&#x6709;&#x4E24;&#x79CD;&#x65B9;&#x5F0F;&#xFF1A;
      </p>
      <ul>
        <li>
          <p>
            &#x5168;&#x5C40;&#x5F15;&#x7528;&#x6837;&#x5F0F;&#xFF08;&#x50CF;&#x4E4B;&#x524D;&#x505A;&#x7684;&#x90A3;&#x6837;&#xFF09;&#xFF1B;
          </p>
        </li>
        <li>
          <p>
            &#x5C40;&#x90E8;&#x5F15;&#x7528;&#x6837;&#x5F0F;&#xFF08;&#x901A;&#x8FC7;
            babel &#x7684;&#x63D2;&#x4EF6;&#xFF09;&#xFF1B;
          </p>
          <p>1.&#x5B89;&#x88C5; babel &#x7684;&#x63D2;&#x4EF6;&#xFF1A;</p>
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> babel-plugin-import -D
</pre>
      <p>2.&#x914D;&#x7F6E; babel.config.js</p>
      <pre
        data-role="codeBlock"
        data-info="js"
        class="language-javascript"
      >module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span>
      <span class="token string">&apos;import&apos;</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        libraryName<span class="token operator">:</span> <span class="token string">&apos;element-plus&apos;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">customStyleName</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword control-flow keyword-return">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">element-plus/lib/theme-chalk/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.css</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&apos;@vue/cli-plugin-babel/preset&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</pre>
      <p>
        &#x4F46;&#x662F;&#x8FD9;&#x91CC;&#x4F9D;&#x7136;&#x6709;&#x4E2A;&#x5F0A;&#x7AEF;&#xFF1A;
      </p>
      <ul>
        <li>
          &#x8FD9;&#x4E9B;&#x7EC4;&#x4EF6;&#x6211;&#x4EEC;&#x5728;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x6216;&#x8005;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x90FD;&#x9700;&#x8981;&#x5BFC;&#x5165;&#x5E76;&#x4E14;&#x5728;
          components &#x4E2D;&#x8FDB;&#x884C;&#x6CE8;&#x518C;&#xFF1B;
        </li>
        <li>
          &#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5C06;&#x5B83;&#x4EEC;&#x5728;&#x5168;&#x5C40;&#x6CE8;&#x518C;&#x4E00;&#x6B21;&#xFF1B;
        </li>
      </ul>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span>
  ElButton<span class="token punctuation">,</span>
  ElTable<span class="token punctuation">,</span>
  ElAlert<span class="token punctuation">,</span>
  ElAside<span class="token punctuation">,</span>
  ElAutocomplete<span class="token punctuation">,</span>
  ElAvatar<span class="token punctuation">,</span>
  ElBacktop<span class="token punctuation">,</span>
  ElBadge<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;element-plus&apos;</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> components <span class="token operator">=</span> <span class="token punctuation">[</span>
  ElButton<span class="token punctuation">,</span>
  ElTable<span class="token punctuation">,</span>
  ElAlert<span class="token punctuation">,</span>
  ElAside<span class="token punctuation">,</span>
  ElAutocomplete<span class="token punctuation">,</span>
  ElAvatar<span class="token punctuation">,</span>
  ElBacktop<span class="token punctuation">,</span>
  ElBadge<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword keyword-for">for</span> <span class="token punctuation">(</span><span class="token keyword keyword-const">const</span> cpn <span class="token keyword keyword-of">of</span> components<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>cpn<span class="token punctuation">.</span>name<span class="token punctuation">,</span> cpn<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
      <h3 class="mume-header" id="25-axios-%E9%9B%86%E6%88%90">
        2.5. axios &#x96C6;&#x6210;
      </h3>

      <p>&#x5B89;&#x88C5; axios&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="shell"
        class="language-shell"
      ><span class="token function">npm</span> <span class="token function">install</span> axios
</pre>
      <p>&#x5C01;&#x88C5; axios&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info="ts"
        class="language-ts"
      ><span class="token keyword keyword-import">import</span> axios<span class="token punctuation">,</span> <span class="token punctuation">{</span> AxiosInstance<span class="token punctuation">,</span> AxiosRequestConfig<span class="token punctuation">,</span> AxiosResponse <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;axios&apos;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Result <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;./types&apos;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> useUserStore <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;/@/store/modules/user&apos;</span><span class="token punctuation">;</span>

<span class="token keyword keyword-class">class</span> <span class="token class-name">HYRequest</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-private">private</span> instance<span class="token operator">:</span> AxiosInstance<span class="token punctuation">;</span>

  <span class="token keyword keyword-private">private</span> <span class="token keyword keyword-readonly">readonly</span> options<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">;</span>

  <span class="token function">constructor</span><span class="token punctuation">(</span>options<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>options <span class="token operator">=</span> options<span class="token punctuation">;</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>instance <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
      <span class="token punctuation">(</span>config<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-const">const</span> token <span class="token operator">=</span> <span class="token function">useUserStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>getToken<span class="token punctuation">;</span>
        <span class="token keyword keyword-if">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Bearer </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>token<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword keyword-return">return</span> config<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-return">return</span> err<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
      <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// &#x62E6;&#x622A;&#x54CD;&#x5E94;&#x7684;&#x6570;&#x636E;</span>
        <span class="token keyword keyword-if">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword keyword-return">return</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword keyword-return">return</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-return">return</span> err<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token generic-function"><span class="token function">request</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name"><span class="token builtin">Promise</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>instance
        <span class="token punctuation">.</span><span class="token generic-function"><span class="token function">request</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> AxiosResponse<span class="token operator">&lt;</span>Result<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;&gt;&gt;</span></span></span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">resolve</span><span class="token punctuation">(</span>res <span class="token keyword keyword-as">as</span> <span class="token builtin">unknown</span> <span class="token keyword keyword-as">as</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token generic-function"><span class="token function">get</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>config<span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">&apos;GET&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token generic-function"><span class="token function">post</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>config<span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">&apos;POST&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token generic-function"><span class="token function">patch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>config<span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">&apos;PATCH&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword keyword-delete">delete</span><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>config<span class="token operator">:</span> AxiosRequestConfig<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>config<span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">&apos;DELETE&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> HYRequest<span class="token punctuation">;</span>
</pre>
      <h3 class="mume-header" id="26-vscode-%E9%85%8D%E7%BD%AE">
        2.6. VSCode &#x914D;&#x7F6E;
      </h3>

      <pre
        data-role="codeBlock"
        data-info="json"
        class="language-json"
      ><span class="token punctuation">{</span>
  <span class="token property">&quot;workbench.iconTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vscode-great-icons&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.fontSize&quot;</span><span class="token operator">:</span> <span class="token number">17</span><span class="token punctuation">,</span>
  <span class="token property">&quot;eslint.migration.2_x&quot;</span><span class="token operator">:</span> <span class="token string">&quot;off&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;[javascript]&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;editor.defaultFormatter&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dbaeumer.vscode-eslint&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;files.autoSave&quot;</span><span class="token operator">:</span> <span class="token string">&quot;afterDelay&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.tabSize&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token property">&quot;terminal.integrated.fontSize&quot;</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.renderWhitespace&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.quickSuggestions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;strings&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;debug.console.fontSize&quot;</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
  <span class="token property">&quot;window.zoomLevel&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token property">&quot;emmet.includeLanguages&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;javascript&quot;</span><span class="token operator">:</span> <span class="token string">&quot;javascriptreact&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;explorer.confirmDragAndDrop&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;workbench.tree.indent&quot;</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
  <span class="token property">&quot;javascript.updateImportsOnFileMove.enabled&quot;</span><span class="token operator">:</span> <span class="token string">&quot;always&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.wordWrap&quot;</span><span class="token operator">:</span> <span class="token string">&quot;on&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;path-intellisense.mappings&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;@&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceRoot}/src&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;hediet.vscode-drawio.local-storage&quot;</span><span class="token operator">:</span> <span class="token string">&quot;eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;hediet.vscode-drawio.theme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Kennedy&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.fontFamily&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Source Code Pro, &apos;Courier New&apos;, monospace&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.smoothScrolling&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.formatOnSave&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.defaultFormatter&quot;</span><span class="token operator">:</span> <span class="token string">&quot;esbenp.prettier-vscode&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;workbench.colorTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Atom One Dark&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;vetur.completion.autoImport&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;security.workspace.trust.untrustedFiles&quot;</span><span class="token operator">:</span> <span class="token string">&quot;open&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;eslint.lintTask.enable&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;eslint.alwaysShowStatus&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">&quot;editor.codeActionsOnSave&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;source.fixAll.eslint&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre>
      <h2
        class="mume-header"
        id="%E4%B8%89-%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3"
      >
        &#x4E09;. &#x63A5;&#x53E3;&#x6587;&#x6863;
      </h2>

      <p>
        <a href="https://documenter.getpostman.com/view/12387168/TzsfmQvw"
          >https://documenter.getpostman.com/view/12387168/TzsfmQvw</a
        >
      </p>
      <p>baseURL &#x7684;&#x503C;&#xFF1A;</p>
      <pre
        data-role="codeBlock"
        data-info
        class="language-"
      ><code>http://152.136.185.210:5000
</code></pre>
      <p>
        &#x8BBE;&#x7F6E;&#x5168;&#x5C40; token &#x7684;&#x65B9;&#x6CD5;&#xFF1A;
      </p>
      <pre
        data-role="codeBlock"
        data-info="js"
        class="language-javascript"
      ><span class="token keyword keyword-const">const</span> res <span class="token operator">=</span> pm<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
pm<span class="token punctuation">.</span><span class="token property-access">globals</span><span class="token punctuation">.</span><span class="token method function property-access">set</span><span class="token punctuation">(</span><span class="token string">&apos;token&apos;</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">token</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
      <p>
        &#x63A5;&#x53E3;&#x6587;&#x6863; v2
        &#x7248;&#x672C;&#xFF1A;&#xFF08;&#x6709;&#x90E8;&#x5206;&#x66F4;&#x65B0;&#xFF09;
      </p>
      <p>
        <a href="https://documenter.getpostman.com/view/12387168/TzzDKb12"
          >https://documenter.getpostman.com/view/12387168/TzzDKb12</a
        >
      </p>
    </div>
  </body>
</html>
